<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>teacher</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

    <div class="container" style="margin: 20px auto;" id="teacherApp">

        <button type="button" class="btn btn-primary" @click="fnShowTeacherModal">add</button>

        <button type="button" class="btn btn-link" @click="fnUp">上一页</button>
        <button type="button" class="btn btn-link" @click="fnDown">下一页</button>

        <div class="card" v-for="(item, index) in dataList" :key="index" style="margin-top: 20px;">
            <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
            <div class="card-body">
                <!--<h4 class="card-title">{{item.sname}}</h4>-->
                <table class="table table-responsive-sm">
                    <tbody class="w-100">

                        <tr class="row mx-0">
                            <td class="col-3">姓名</td>
                            <td class="col-9">{{item.sname}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">照片</td>
                            <td class="col-9">
                                <img src="mm.jpg" class="rounded img-fluid" />
                            </td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">手机号</td>
                            <td class="col-9">{{item.phone}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">说明</td>
                            <td class="col-9">{{item.note}}</td>
                        </tr>
                        <tr class="row mx-0">
                            <td class="col-3">操作</td>
                            <td class="col-9">

                                <button type="button" class="btn btn-link" @click="fnShowUpdateModal(item)">修改</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>



        <!-- 模态框 -->
        <div class="modal fade" id="teacherModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <form>

                            <div class="form-group">
                                <label for="">姓名</label>
                                <input type="text" class="form-control" v-model="teacherForm.sname">
                            </div>
                            <div class="form-group">
                                <label for="">手机号</label>
                                <input type="text" class="form-control" v-model="teacherForm.phone">
                            </div>

                            <div class="form-group">
                                <label for="">说明</label>
                                <textarea class="form-control" v-model="teacherForm.note" rows="3"></textarea>
                            </div>


                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                    </div>

                </div>
            </div>
        </div>



    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#teacherApp',
        data: {

            pageNum: 0,
            teacherForm: {

            },
            dataList: []

        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //上一页
            fnUp() {
                this.pageNum--;
                if (this.pageNum < 0) {
                    this.pageNum = 0;
                }
                this.queryTeacher();
            },

            //下一页
            fnDown() {

                this.pageNum++;
                if (this.pageNum > 100) {
                    this.pageNum = 100;
                }

                this.queryTeacher();
            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },


            // 新增 modal
            fnShowTeacherModal() {

                $('#teacherModal').modal('show');
            },


            //修改 modal
            fnShowUpdateModal(item) {
                this.teacherForm = item;
                $('#teacherModal').modal('show');
            },



            //修改 item
            fnSave() {


                if (!this.teacherForm.sname) {
                    alert('姓名不能为空');
                    return false;
                }
                if (!this.teacherForm.phone) {
                    alert('手机号不能为空');
                    return false;
                }

                var _self = this;

                var postUrl = '/teachers';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.teacherForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#teacherModal').modal('hide');
                            _self.teacherForm = {};
                            _self.queryTeacher();
                        }

                    }
                });
            },






            // 查询 cate
            queryTeacher() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./teachers?page=" + this.pageNum,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },


        },
        mounted() {

            this.queryTeacher();
        }
    })


</script>